.wf-center{

  .tab-btn {
    margin: 0 @h-spacing-sm;
    display: inline-block;
  
    .am-icon {
      width: @font-size-heading;
      height: @font-size-heading;
      color: #a1a1a1;
    }
  }
  .tab-btn:first-of-type {
    margin-left: 0;
  }
  .tab-btn:last-of-type {
    margin-right: 0;
  }

  .button-disable{
     background-color: @fill-disabled;
     border-color: @fill-disabled;
  }

 
  .wf-center-extraPrompt{
     text-align: center;
     line-height: 30 * @hd;
     background: #DFF1FF;
     color: @brand-primary;
  }
  .wf-bottomOperate-wrap {
    width: 100%;
    //height: 44 * @hd;
    //line-height: 44 * @hd;
    // text-align: center;
    background: @fill-body;
    border-top: 1 * @hd solid #ccc;
    position: relative;
  }

  // signBottom
  .bottomOperate-container {
    width: 100%;
    height: 44 * @hd;
    font-size: 14 * @hd;
    color:@color-text-paragraph;

    .sign-bottom-item {
      text-align: center;

      .pointer {
        display: inline-block;
        vertical-align: middle;
        height: 20 * @hd;
      }

      .am-icon, .item-showname {
        display: inline-block;
        vertical-align: middle;
      }
    }

    .sign-bottom-item::after {
      display: inline-block;
      vertical-align: middle;
    }

    .wf-bottomOperate-split {
      float: right;

      .wf-bottomOperate-split-line {
        width: 2 * @hd;
        height: 20 * @hd;
        background-color: #DCDCDC;
        margin: auto;
      }
    }
  }

  // SignActionPanel.js
  .wf-signView-panel {
    position: absolute;
    z-index: 100;
    bottom: 0;
    width: 100%;
    background: #eee;
    text-align: left;

    .wf-signView-panel-mask {
      background: @fill-mask;
      height: 100vh;
      width: 100%;
      position: absolute;
      z-index: 99;
      left: 0;
      top: -100vh;
    }

    .wf-signView-panel-content {
      padding: 0 * @hd 10 * @hd;

      .sign-panel-title {
        text-align: center;
        height: 44 * @hd;
        line-height: 44 * @hd;

        .sign-userInfo {
          position: absolute;
          left: 15 * @hd;
          top: 10 * @hd;

          div {
            display: inline-block;
            vertical-align: middle;
            width: auto;
            max-width: 10vw;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;

            img {
              width: 30 * @hd;
              height: 30 * @hd;
              border-radius: 50%;
              position: relative;
            }
          }

          .more-user {
            display: inline-block;
            width: 25 * @hd;
            height: 25 * @hd;
            background: @color-text-placeholder;
            border-radius: 50%;
            color: @color-text-base-inverse;
            position: absolute;
            line-height: 34 * @hd;
          }
        }

        .sign-phrase-title {
          display: inline-flex;

          .span-title {
            height: 20 * @hd;
            line-height: 20 * @hd;
            padding-right: 15 * @hd;
            font-size: 17 * @hd;
            color: @color-text-paragraph;
          }

          .am-icon-md {
            width: 20 * @hd;
            height: 20 * @hd;
          }
        }
      }

      .sign-action-btns {
        padding: 15 * @hd 0 10 * @hd 0;

        .sign-action-list {
          width: 100%;
          height: 100%;
          overflow: inherit;

          .am-flexbox-item {
            text-align: center;
          }
        }

        .am-icon-md {
          width: 28 * @hd;
          height: 28 * @hd;
        }

        .set-word {
          position: relative;

          .word-list {
            display: flex;
            justify-content: space-around;
            align-items: center;
            position: absolute;
            top: -70 * @hd;
            left: 50%;
            transform: translateX(-14 * @hd);
            line-height: 24 * @hd;
            background: #242628;
            color: #fff;
            border-radius: 5 * @hd;

            .word-list-arrow {
              position: absolute;
              left: 8 * @hd;
              bottom: -19 * @hd;
              border-top: 10 * @hd solid #242628;
              border-right: 10 * @hd solid transparent;
              border-left: 10 * @hd solid transparent;
              border-bottom: 10 * @hd solid transparent;
            }

            .item {
              margin: 10 * @hd 10 * @hd;
            }

            .tag-h {
              font-weight: normal;
            }
          }
        }

        .out-inputs {
          position: relative;

          .outinput-list {
            position: absolute;
            bottom: 16 * @hd;
            right: 20 * @hd;
            text-align: left;
            background: @fill-base;
            box-shadow: 0 0 12 * @hd #999;
            z-index: 100;
            font-size: 16 * @hd;

            div {
              padding: 10 * @hd;
              min-width: 20vw;
              max-width: 50vw;
              display: flex;
              align-items: center;

              .am-icon {
                margin-right: 15 * @hd;
                color: @color-text-placeholder;
              }

              span {
                display: inline-block;
                overflow: hidden;
                text-overflow: ellipsis;
                min-width: 20vw;
                max-width: 50vw;
                white-space: nowrap;

                input {
                  position: absolute;
                  top: 0;
                  left: 0;
                  bottom: 0;
                  right: 0;
                  opacity: 0;
                  width: 100%;
                }
              }
            }

            .upload-file {
              position: relative;
            }
          }
        }
      }

      .sign-panel-main {
        position: relative;
        border: 1 * @hd solid #ccc;

        .am-list-item {
          border: 1 * @hd solid #B2B2B2;

          .am-textarea-control {
            padding-bottom: 40 * @hd;
          }
        }

        .am-rich-editor {
          .ql-container {
            height: 160 * @hd;
            border: 0 * @hd;
          }

          .ql-toolbar {
            border: 0 * @hd;
            border-bottom: 1 * @hd solid #ccc;
          }
        }

        .sign-position-info {
          width: 100%;
          background:@fill-base;
          display: flex;
          height: 40 * @hd;
          line-height: 40 * @hd;

          .position-show {
            display: inline-block;
            vertical-align: middle;
            width: 100%;
            padding-left: 10 * @hd;
            padding-top: 5 * @hd;

            .am-icon {
              display: inline-block;
              vertical-align: middle;
            }

            .am-button {
              line-height: 28 * @hd;

              .am-icon {
                margin-right: 5 * @hd;
              }

              span {
                display: inline-block;
                vertical-align: middle;
              }
            }

            .position-detail {
              display: inline-block;
              vertical-align: middle;
              width: auto;
              max-width: 80%;
              white-space: nowrap;
              overflow-x: hidden;
              text-overflow: ellipsis;
            }
          }

          .delete-position {
            position: absolute;
            bottom: 30 * @hd;
          }

          .sign-attachment-info {
            width: 60 * @hd;

            .sign-attachment-info_dt {
              display: inline-block;
              vertical-align: middle;
              position: relative;

              .am-icon {
                margin-left: 7 * @hd;
                margin-top: 7 * @hd;
                width: 16 * @hd;
                height: 16 * @hd;
              }

              width: 30 * @hd;
              height: 30 * @hd;
              background-image: linear-gradient(-90deg, #56BACE 18%, #76D29F 92%);
              border-radius: 50%;
              color: @color-text-base-inverse;

              .sign-attachment-dot {
                display: block;
                position: absolute;
                width: 8 * @hd;
                height: 8 * @hd;
                background: @brand-important;
                border: 1 * @hd solid #FFFFFF;
                border-radius: 50%;
                top: 2 * @hd;
                right: -5 * @hd;
              }
            }
          }
        }

      }
    }

    .sign-panel-bottom {
      border-top: 1 * @hd solid #ccc;

      .sign-bottom-container {
        height: 44 * @hd;
        background: @fill-grey;

        .sign-bottom-item {
          text-align: center;

          .pointer {
            display: inline-block;
            vertical-align: middle;
            height: 20 * @hd;
          }
        }

        .wf-bottomOperate-split {
          float: right;

          .wf-bottomOperate-split-line {
            width: 2 * @hd;
            height: 20 * @hd;
            background-color: #DCDCDC;
            margin: auto;
          }
        }
      }
    }

    .sign-sound-input {
      height: 220 * @hd;
      border-top: 1 * @hd solid #DCDCDC;
      position: relative;

      .sound-input-container {
        height: 100%;
        padding: 15 * @hd 0;
        font-size: 16 * @hd;
        color: #666;

        .sound-area {
          width: 100 * @hd;
          height: 100 * @hd;
          background: @brand-primary;
          line-height: 140 * @hd;
          text-align: center;
          border-radius: 50%;
          color: @color-text-base-inverse;

          .am-icon {
            width: 50%;
            height: 50%;
          }
        }
      }

      .goBack {
        position: absolute;
        right: 15 * @hd;
        bottom: 10%;
        color: @color-text-caption;

        .am-icon {
          width: 30 * @hd;
          height: 30 * @hd;
        }
      }
    }
  }

  // sign-attachment
  .sign-attachment {
    padding: 0 10 * @hd;
    overflow: auto;
    background: @fill-grey;
    border-top: 1 * @hd solid #BCBCBC;

    .attachment-full-text-postil {
      .fullTextPostils-list {
        .fullTextPostils-item {
          img {
            width: 50%;
          }
        }
      }
    }

    .file-and-wf-area {
      margin: 5 * @hd 0;

      .am-flexbox-item:nth-child(1) {
        margin-top: 10 * @hd;
      }
    }

    .attachment-info-list {
      .info-type {
        margin: 10 * @hd 5 * @hd;

        .am-icon-md {
          width: 16 * @hd;
          height: 16 * @hd;
          color: @color-text-caption;
          margin-top: 5 * @hd;
        }

        .info-content {
          display: inline-block;
          width: 90%;
          vertical-align: top;
          margin-left: 10 * @hd;

          .info-item {
            white-space: nowrap;
            text-overflow: ellipsis;
            overflow: hidden;
            font-size: 14 * @hd;
            color: @color-text-paragraph;
            line-height: 21 * @hd;
            height: 21 * @hd;

            a {
              font-size: 14 * @hd;
              color: @color-text-paragraph;
            }
          }
        }
      }
    }

  }


}

.wf-center-list-requestname {
  overflow: hidden;

  text-overflow: ellipsis;

  &:after {
    clear: both;
  }

}
.wf-m-tooltip {
  //pointer-events: none;
  background: #373737 !important;


  .am-popover-content {

    .am-popover-arrow {
      background-color: #373737;
    }

    .am-popover-inner-wrapper {
      background-color: #373737;

      .am-popover-item-container {
        height: 30 * @hd;
      }
    }

    .am-popover-item.am-popover-item-disabled {
      color: @color-text-base-inverse;
      font-size: 10 * @hd;
    }
  }
}

.wf-center-list-mainwf {
  // display: inline-block;
  // color: #FF9900;
  // background: inherit;
  // background-color: rgba(255, 255, 255, 1);
  // box-sizing: border-box;
  // border-width: 1 * @hd;
  // border-style: solid;
  // border-color: rgba(255, 153, 0, 1);
  // border-radius: 0 * @hd;
  // width: 25 * @hd;
  // height: 25 * @hd;
  // text-align: center;
  // margin-left: 3 * @hd;1
  width: 16 * @hd;
  height: 16 * @hd;
  font-family: PingFang-SC-Medium;
  font-size: 9 * @hd;
  color: @color-text-base-inverse;
  letter-spacing: -0.25 * @hd;
  text-align: center;
  line-height: 14 * @hd;
  background: @brand-primary;
  border-radius: 5 * @hd;
  position: absolute;
  top: 8 * @hd;
}

.wf-center-list-mainwf-secondary {
  display: inline-block;
  background: #A0A9AF;
  width: 16 * @hd;
  height: 16 * @hd;
  font-family: PingFang-SC-Medium;
  font-size: 9 * @hd;
  color: @color-text-base-inverse;
  letter-spacing: -0.25 * @hd;
  text-align: center;
  line-height: 14 * @hd;
  border-radius: 5 * @hd;
  position: absolute;
  top: 8 * @hd;
  
}

.wf-center-list-submitSize{
  font-size: 14*@hd;
}

.wf-bottomOperate-container{
  height: 47*@hd;
  border-top: 1px solid #ddd;
  line-height:47*@hd;

  .sign-bottom-item {
    text-align: center;

    .am-icon {
      padding-top: 6 * @hd;
    }
  }

  .sign-bottom-right-border {
    height: 47 * @hd;
    line-height: 47 * @hd;
    border-right: 1 * @hd  solid #DDD;

    .item-showname {
      white-space: nowrap;
      text-overflow: ellipsis;
      overflow: hidden;
      display: block;
    }
  }
}
